<template>
    <div style="padding:20px 20px 20px 20px;background:#fff;">
      <el-table :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%"
        row-key="id" border lazy :load="load" 
        :tree-props="{children: 'son', hasChildren: 'hasChildren'}">
      <el-table-column prop="name" label="单号" align="center" width="140">
        <template slot-scope="scope">
          <a @click="detail(scope.row.id)" style="color:#1a8dff;font-size: 14px;">
            {{scope.row.orderNum}}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="customer_name" label="客户名称" align="center" width="150"></el-table-column>
      <el-table-column prop="phone" align="center" label="电话" width="130"></el-table-column>
      <el-table-column prop="totalMoney" align="center" label="订单金额" width="130"></el-table-column>
      <el-table-column prop="pay_status_text" align="center" label="收款状态" width="100"></el-table-column>
      <el-table-column prop="take_status_text" align="center" label="送货状态" width="100"></el-table-column>
      <el-table-column prop="username" align="center" label="制单人" width="100"></el-table-column>
      <el-table-column prop="saleDate" align="center" label="销售日期" width="100"></el-table-column>
      <el-table-column prop="addtime" align="center" label="下单时间" width="100"></el-table-column>
      <el-table-column
            fixed="right"
            label="操作" size="small"
            width="100" align="center">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.pay_status == 1" class="item smallinit" effect="dark" content="收款" placement="top-start">
              <el-button size="small" type="warning" icon="el-icon-coin" @click="firmPay(scope.row.id)">
              </el-button>
            </el-tooltip>
            <el-tooltip v-if="scope.row.take_status == 1" class="item smallinit" effect="dark" content="送货" placement="top-start">
              <el-button size="small" type="primary" icon="el-icon-upload" @click="firmTake(scope.row.id)"></el-button>
            </el-tooltip>
            <el-popconfirm title="确定要取消当前订单吗" @confirm="buyStatus(scope.row.id)">
                <el-button type="danger" size="small" class="smallinit" icon="el-icon-delete" slot="reference"
                ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
        
    </el-table>
    <el-pagination
      class="fen"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      :page-sizes="[5, 10, 20, 50]"      
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.length">
      </el-pagination>
      <div class="firm" v-show="firmShow">
          <div class="firm_title">
            <div style="width:80%;text-align:center;">提示</div>
            <i @click=" firmShow= !firmShow" class="el-icon-circle-close"></i>
          </div>
          <div class="remark">确定要收款吗?</div>
          <div class="firm_footer">
            <el-button @click="buyStatusEdit('pay_status',2)" type="primary">&nbsp;确&nbsp;&nbsp;定&nbsp;</el-button>
            <el-button type="info" @click=" firmShow= !firmShow">&nbsp;取&nbsp;&nbsp;消&nbsp;</el-button>
          </div>
      </div>
      <div class="firm" v-show="takeShow">
          <div class="firm_title">
            <div style="width:80%;text-align:center;">提示</div>
            <i @click=" takeShow= !takeShow" class="el-icon-circle-close"></i>
          </div>
          <div class="remark">确认已送货?</div>
          <div class="firm_footer">
            <el-button @click="buyStatusEdit('take_status',2)" type="primary">&nbsp;确&nbsp;&nbsp;定&nbsp;</el-button>
            <el-button type="info" @click=" takeShow= !takeShow">&nbsp;取&nbsp;&nbsp;消&nbsp;</el-button>
          </div>
      </div>
</div>
</template>
<script>
export default {
  name: 'saleTable',
  props:['list'],
  data(){
      return {
          currentPage:1, //初始页
          pagesize:10, //每页的数据
          show_page:true,
          nowpage:1,
          maxpage:10,
          imgUrl:this.url,
          firmShow:false,
          takeShow:false,
          id:0
      }
  },
  methods: {
    handleSizeChange: function (size) {
        this.pagesize = size;
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
    },
    changeLeft($event){
        $event.currentTarget.className="active";
    },
    removeLeft($event){
        $event.currentTarget.className ="tdclass";
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve()
      }, 1000)
    },
    del:function(id,scope){
      var index = scope.$index
      var that = this
      this.$del('goods/del',{id:id}).then((res) => {
        if(res.code == 1){
            that.$message.success(res.msg);
            that.list.splice(index,1)
        }else{
          that.$message.error(res.msg);
        }
      })
    },
    firmPay:function(id){
      this.id = id
      this.firmShow = true
    },
    firmTake:function(id){
      this.id = id
      this.takeShow = true
    },
    buyStatusEdit:function(type,status){
      var data = {id:this.id,[type]:status}
      var that = this
      this.$post('sale/save',data).then((res) => {
        that.$message.success(res.msg);
        that.takeShow = false
        that.firmShow = false
        that.$emit("func",{'key':''})
      })
    },
    buyStatus:function(id){
      var data = {id:id,status:2}
      var that = this
      this.$post('sale/save',data).then((res) => {
        that.$message.success(res.msg);
        that.$emit("func",{'key':''})
      })
    },
    detail:function(id){
      var that = this
      this.$get('sale/info',{id:id}).then((res) => {
        that.$emit("func",{key:'detailShow',item:res.data.info,arr:res.data.list})
      })
    }
  },
  created: function() {
    
  }
};
</script>
<style>
.fen{text-align:center;}
.el-button+.el-button {
    margin-left: 3px !important;
}
.smallinit {
    padding: 2px 4px !important;
}
.remark{
  height:80px;
  line-height:80px;
  text-align:center;
  font-weight:bold;
}
</style>